<template>
  <div class="app-container">
    <el-tabs type="border-card">
      <el-tab-pane label="我的流程" style="max-height: 760px; height: 760px; padding-right: 15px;">
        <el-form :model="query.key" ref="queryForm" size="small" :inline="true">
          <!--      <el-form-item label="菜单名称" prop="menuName">-->
          <!--        <el-input-->
          <!--          v-model="query.key.processName"-->
          <!--          placeholder="请输入菜单名称"-->
          <!--          clearable-->
          <!--          @keyup.enter.native="handleQuery"-->
          <!--        />-->
          <!--      </el-form-item>-->
          <el-form-item label="状态" prop="status">
            <el-select v-model="query.key.processStatus" placeholder="菜单状态" clearable>
              <el-option
                v-for="dict in processStatusList"
                :key="dict.index"
                :label="dict.name"
                :value="dict.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item>

          </el-form-item>
        </el-form>

        <div>
          <el-button type="primary" icon="el-icon-plus" @click="handleAddProcess">创建流程</el-button>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button :icon="isClick ? 'el-icon-refresh' : 'el-icon-loading'" @click="refreshSelectProcessInstance()"></el-button>
        </div>

        <el-table
          ref="multipleTable"
          :data="list"
          border
          tooltip-effect="dark"
          style="width: 100%; margin-top: 20px;">
          <el-table-column
            type="index"
            label="序号"
            width="55"
            align="center"
            sortable
            :index="indexMethod">
          </el-table-column>
          <el-table-column
            prop="processName"
            align="center"
            label="流程模板名称">
          </el-table-column>
          <el-table-column
            prop="processTitle"
            align="center"
            label="流程标题">
          </el-table-column>
          <el-table-column
            prop="processStatus"
            align="center"
            label="流程状态"
            width="160">
          </el-table-column>
          <el-table-column label="开始时间" align="center" prop="createTime" width="160">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="结束时间" align="center" prop="endTime" width="160">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.endTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="50">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleOpenProcess(scope.row.processInstanceId, scope.row.processTitle)">打开</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page + 1"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="query.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total" style="float: right; margin-top: 20px;">
        </el-pagination>
      </el-tab-pane>


      <el-tab-pane label="我的任务" style="max-height: 760px; height: 760px; padding-right: 15px;">
        <div>
          <el-button :icon="isClick ? 'el-icon-refresh' : 'el-icon-loading'" @click="refreshSelectUserTask()"></el-button>
        </div>

        <el-table
          ref="multipleTable"
          :data="userList"
          border
          tooltip-effect="dark"
          style="width: 100%; margin-top: 20px;">
          <el-table-column
            type="index"
            label="序号"
            width="55"
            align="center"
            sortable
            :index="indexMethod">
          </el-table-column>
          <el-table-column
            prop="processName"
            align="center"
            label="流程模板名称">
          </el-table-column>
          <el-table-column
            prop="processTitle"
            align="center"
            label="流程标题">
          </el-table-column>
          <el-table-column
            prop="currentNode"
            align="center"
            label="当前节点">
          </el-table-column>
          <el-table-column
            prop="delegate"
            align="center"
            label="委托人">
          </el-table-column>
          <el-table-column label="开始时间" align="center" prop="createTime" width="160">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="50">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleOpenProcess(scope.row.processInstanceId, scope.row.processTitle)">打开</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="userQuery.page + 1"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="userQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="userTotal" style="float: right; margin-top: 20px;">
        </el-pagination>
      </el-tab-pane>


      <el-tab-pane label="我的委托" style="max-height: 760px; height: 760px; padding-right: 15px;">
        <div>
          <el-button :icon="isClick ? 'el-icon-refresh' : 'el-icon-loading'" @click="refreshSelectDelegateTask()"></el-button>
        </div>

        <el-table
          ref="multipleTable"
          :data="delegateList"
          border
          tooltip-effect="dark"
          style="width: 100%; margin-top: 20px;">
          <el-table-column
            type="index"
            label="序号"
            width="55"
            align="center"
            sortable
            :index="indexMethod">
          </el-table-column>
          <el-table-column
            prop="processName"
            align="center"
            label="流程模板名称">
          </el-table-column>
          <el-table-column
            prop="processTitle"
            align="center"
            label="流程标题">
          </el-table-column>
          <el-table-column
            prop="currentNode"
            align="center"
            label="当前节点">
          </el-table-column>
          <el-table-column
            prop="delegate"
            align="center"
            label="被委托人">
          </el-table-column>
          <el-table-column label="开始时间" align="center" prop="createTime" width="160">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="50">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleOpenProcess(scope.row.processInstanceId, scope.row.processTitle)">打开</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="delegateQuery.page + 1"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="delegateQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="delegateTotal" style="float: right; margin-top: 20px;">
        </el-pagination>
      </el-tab-pane>
    </el-tabs>

    <ProcessControl ref="processControl" @init="init"></ProcessControl>
  </div>
</template>

<script>
import {
  getProcessInstanceByUser,
  getUserTaskByUser,
  getDelegateTaskByUser,
  test
} from '@/api/camunda/camunda'

import ProcessControl from '@/components/Camunda/processControl'

export default {
  name: "index",
  components: {
    ProcessControl
  },
  data() {
    return {
      list: [],
      query: {
        page: 0,
        size: 10,
        key: {
          processName: '',
          processStatus: '',
        }
      },
      total: 0,
      processStatusList: [
        {index: 1, name: "COMPLETED"},
        {index: 2, name: "ACTIVE"},
        {index: 3, name: "SUSPENDED"}
      ],
      title: '流程',
      repName: 0,
      openProcess: false,
      processInstanceId: undefined,
      openProcessVar: false,
      processVarList: [],

      userList: [],
      userQuery: {
        page: 0,
        size: 10,
        key: {

        }
      },
      userTotal: 0,

      delegateList: [],
      delegateQuery: {
        page: 0,
        size: 10,
        key: {

        }
      },
      delegateTotal: 0,
      isClick: true,
    }
  },
  created() {
    this.init()
  },
  methods: {
    init(){
      this.handleSelectProcessInstance()
      this.handleSelectUserTask()
      this.handleSelectDelegateTask()
    },
    refreshSelectProcessInstance(){
      if(this.isClick){
        this.isClick = false
        this.query.key = {
          processName: '',
          processStatus: ''
        }
        this.handleSelectProcessInstance()
        setTimeout(() => {
          this.isClick = true
        }, 1000)
      }
    },
    refreshSelectUserTask(){
      if(this.isClick){
        this.isClick = false
        this.handleSelectUserTask()
        setTimeout(() => {
          this.isClick = true
        }, 1000)
      }
    },
    refreshSelectDelegateTask(){
      if(this.isClick){
        this.isClick = false
        this.handleSelectDelegateTask()
        setTimeout(() => {
          this.isClick = true
        }, 1000)
      }
    },
    handleAddProcess() {
      this.$refs.processControl.init(null, '创建流程', true)
    },
    handleQuery() {
      this.init()
    },
    indexMethod(index) {
      const sum = this.query.size * (this.query.page)
      return index + sum + 1
    },
    handleCurrentChange(val) {
      this.query.page = val - 1
      this.init()
    },
    handleSizeChange(val) {
      this.query.size = val
      this.init()
    },
    handleSelectionChange(val) {
      this.multiple = val;
    },
    handleCancel() {
      this.reset()
      this.open = false
    },
    reset() {
      this.form = {
        id: undefined,
        name: '',
        describe: '',
        status: '1',
        sort: 0,
        createTime: null,
        updateTime: null
      }
    },
    handleOpenProcess(processInstanceId, processTitle) {
      this.$refs.processControl.init(processInstanceId, processTitle)
    },
    handleSelectProcessInstance() {
      // 初始化数据模型列表
      getProcessInstanceByUser(this.query)
        .then(({data}) => {
          this.total = data.total
          this.list = data.rows
        }).catch()
    },
    handleSelectUserTask() {
      getUserTaskByUser(this.userQuery)
        .then(({data}) => {
          this.userTotal = data.total
          this.userList = data.rows
        }).catch()
    },
    handleSelectDelegateTask() {
      getDelegateTaskByUser(this.delegateQuery)
        .then(({data}) => {
          this.delegateTotal = data.total
          this.delegateList = data.rows
        }).catch()
    }
  }
}
</script>

<style>
.highlight .djs-visual > :nth-child(1) {
  stroke: green !important;
  text-color: green !important;
  /*fill: rgba(0, 80, 0, 0.4) !important;*/
}
.highlightIDO .djs-visual > :nth-child(1) {
  stroke: rgb(255, 196, 0) !important;
  /*fill: rgba(255, 196, 0, 0.4) !important;*/
}
.highlightTODO .djs-visual > :nth-child(1) {
  stroke: rgb(255, 0, 0) !important;
  /*fill: rgba(255, 255, 255, 0.4) !important;*/
}
</style>

<style scoped>

</style>
